<template>
    <div class="bg">
        <div id="left_navigation">
            <div id="navigation_header">
                <div class="navigation-icon" >
                    <h3>{{identify}}</h3>
                </div>
            </div>
            <div id="menu-list"  v-if="status == '1' || status == '0'">
                <div :class="`menu-item ${(menu.UserFilled && !submenu_checked ) && 'menu-item-selected'}`" @click="menuVisit('UserFilled')">
                    <div class="menu-item-icon"><el-icon style="height:100%"><UserFilled /></el-icon></div>
                    <div class="menu-item-text"><text>用户管理</text></div>
                </div>  
                <div v-if="menu.UserFilled" :class="`menu-item-subitem ${submenu.UserFilled.adminUserAdd && 'menu-item-selected'}`" @click="submenuVisit('adminUserAdd')">
                    添加用户                        
                </div>
                <div :class="`menu-item ${menu.House && 'menu-item-selected'}`" @click="menuVisit('House')">
                    <div class="menu-item-icon"><el-icon><House /></el-icon></div>
                    <div class="menu-item-text"><text>实验室管理</text></div>
                </div>
                <div v-if="menu.House" :class="`menu-item-subitem ${submenu.House.adminLabAdd && 'menu-item-selected'}`" @click="submenuVisit('adminAddLab')">
                    添加实验室                       
                </div>
                <div :class="`menu-item ${menu.List && 'menu-item-selected'}`" @click="menuVisit('List')">
                    <div class="menu-item-icon"><el-icon><List /></el-icon></div>
                    <div class="menu-item-text"><text>预约管理</text></div>
                </div>
            </div>
            <div id="menu-list"  v-if="status == '2'">
                <div :class="`menu-item ${(menu.UserFilled && !submenu_checked ) && 'menu-item-selected'}`" @click="commonMenuVisit('UserFilled')">
                    <div class="menu-item-icon"><el-icon style="height:100%"><UserFilled /></el-icon></div>
                    <div class="menu-item-text"><text>个人信息</text></div>
                </div> 
                <div :class="`menu-item ${menu.House && 'menu-item-selected'}`" @click="commonMenuVisit('House')">
                    <div class="menu-item-icon"><el-icon><House /></el-icon></div>
                    <div class="menu-item-text"><text>实验室查询</text></div>
                </div>
                <div :class="`menu-item ${menu.List && 'menu-item-selected'}`" @click="commonMenuVisit('List')">
                    <div class="menu-item-icon"><el-icon><List /></el-icon></div>
                    <div class="menu-item-text"><text>预约管理</text></div>
                </div>
            </div>
        </div>
        <div id="right_content">
            <div id="right_top_bar"> 
                <div style="display:flex;flex-direction: column;justify-content:center;align-items: center;width:30%;height:100%;">
                    <text style="text-align:right;font-size:15px">有问题，欢迎致电：17879386608</text>
                </div>
                <div id="name-space-outer">
                    <div id="name-space">
                        <h2>{{name}}</h2>
                    </div>
                    <div id="logout-button">
                        <el-button type="danger" @click="logout()">登出</el-button>
                    </div>
                </div>
            </div>
            <div id="main_content">
                <router-view>
                    
                </router-view>
            </div>
        </div>
    </div>
</template>
<script>
import * as cookie from "../utils/cookie.utils.js"
import {ElMessageBox} from "element-plus"
export default {
    data(){
        return {
            "menu":{
                "UserFilled":true,
                "House":false,
                "List":false
            },
            "submenu":null,
            "status":'2',
            "name":"",
            "identify":"用户",
            "submenu_checked":null,
            "menu_checked":"UserFilled"
        }
    },
    methods:{
        menuVisit(target){
            if(this.submenu_checked != null)
            {
                this.submenu[this.menu_checked][this.submenu_checked] = false
            } 
            
            this.submenu_checked = null

            if(this.menu_checked != target)
            {
                this.menu[this.menu_checked] = false
                this.menu_checked = target
                this.menu[this.menu_checked] = true
            }
            
            switch(target){
                case "UserFilled": 
                    this.$router.push("/index/adminUser") 
                    break
                case "House": 
                    this.$router.push("/index/adminLab") 
                    break
                case "List": 
                    this.$router.push("/index/adminOrder") 
                    break
            }
        },
        commonMenuVisit(target){
            if(this.menu_checked != target)
            {
                this.menu[this.menu_checked] = false
                this.menu_checked = target
                this.menu[this.menu_checked] = true
            }
            switch(target){
                case "UserFilled":
                    this.$router.push("/index/user/" + cookie.getCookie("id") )
                    break;
                case "House":
                    this.$router.push("/index/lab")
                    break;
                case "List":
                    this.$router.push("/index/order")
                    break;
            }
        },
        submenuVisit(route){
            let router = null
            switch(route){
                case "adminUserAdd":
                    router = `/index/${route}/`+this.status
                    break;
                default:
                    router = `/index/${route}`
            }
            
            this.$router.push(router)
        },  
        logout(){
            ElMessageBox.confirm("你确定要登出当前账户吗？").then(()=>{
                cookie.delCookie("token");
                cookie.delCookie("identify");
                location = "/"
            }).catch(()=>{

            })
        }
    },
    mounted(){
        this.status = cookie.getCookie("identify")
        this.name = decodeURI(cookie.getCookie("name"))
        this.name = decodeURI(this.name)
        if(cookie.getCookie("token") == null)
        {
            location = "/"
        }
        if(this.status == "1"){
            this.menu = {
                "UserFilled":true,
                "House":false,
                "List":false,
                "Message":false
            }
            this.identify = "管理员"
            this.submenu = {
                "UserFilled":{
                    adminUserAdd:false
                },
                "House":{
                    adminLabAdd:false
                }
            }
            this.$router.push("/index/adminUser")
        }else if(this.status == "0"){
            this.menu = {
                "UserFilled":true,
                "House":false,
                "List":false,
                "Message":false
            }
            this.identify = "超级管理员"
            this.submenu = {
                "UserFilled":{
                    adminUserAdd:false,
                },
                "House":{
                    adminLabAdd:false
                }
            }
            this.$router.push("/index/adminUser")
        }else if(this.status == "2"){
            this.identify = "用户"
            this.menu = {
                "UserFilled":true,
                "House":false,
                "List":false,
                "Message":false
            }
            this.$router.push("/index/user/" + cookie.getCookie("id") )
        }else{
            location = "/"
        }
    }
}
</script>

<style scoped>
.bg{
    width:100%;
    height: 100%;
    display:flex;
    flex-direction:row;
    background-color:#a4b0be;
}
#left_navigation{
    margin-left: 1%;
    height: 100%;
    width: 18%;
    margin-right:1%;
    box-shadow: 0px 0px 8px #4e5259;
}

#right_content{
    height: 100%;
    width: 78%;
    margin-right: 1%;
    margin-left: 1%;
}

#main_content{
    height: 88%;
    width: 100%;
    margin-top: 1%;
    box-shadow: 0px 0px 10px 3px #4e525966;
}

#navigation_header{
    height: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration:underline;
}

#navigation-icon{
    height: 40%;
    color: #ced6e0;
    font-weight: bolder;
    font-size:larger;
}



#menu-list{
    user-select: none;
}
.menu-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top:5px;
    padding-bottom: 5px;
    width:100%;
    background-color:#57606f66;
} 

.menu-item-subitem{
    background-color:#57606f66;
    padding-top:5px;
    padding-bottom: 5px;
    cursor: pointer;
}

.menu-item-selected{
    border-left:2px solid #57606f;
    background-color:#383d4588;
} 

.menu-item:hover {
    background-color: #2f354288;
    cursor: pointer;
}
.menu-item-subitem:hover {
    background-color: #2f354288;
    cursor: pointer;
}

.menu-item-icon{
    width:20%;
    height:40%;
    padding-right: 2;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left:10%;
}

.menu-item-text{
    width:70%;
    padding-left:3%;
    text-align: left;
    padding-top:5px;
    padding-bottom: 5px;
}

#right_top_bar{
    width: 100%;
    height: 9%;
    box-shadow: 0px 5px 10px -5px #4e525988;
    display: flex;
    flex-direction:row;
    justify-content: space-between;
}

#name-space-outer{
    width: 10%;
    height: 200%;
    display:flex;
    flex-direction: column;
}

#name-space{
    height: 50%;
}

#logout-button{
    height: 0%;
    width: 100%;
    overflow: hidden;
    z-index:999;
}

#name-space:hover{
    color:gray;
    cursor: pointer;
}

#name-space:hover~div{
    height: 50%;
}

#logout-button:hover{
    height: 40%;
}

router-view{
    height:100%;
}

#Hello{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:white;
    height:60%;
    margin-bottom: 40%;
    width:100%;
}

</style>

